﻿@model Bongiozzo.Controllers.HomeViewBag
@{
    ViewBag.Title = @Html.Raw(Model.CurrentPhoto.Title);
}
@section Header
{
    <meta property="fb:app_id" content="@Model.fb_app_id"/>
    <meta property="og:title" content="@ViewBag.Title" />
    <meta property="og:site_name" content="@Resources.Resources.Title" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="@if (Model.PhotosetId != null) { @Model.SiteUrl@Url.Action("Gallery", new { controller = "Home", id = Model.CurrentPhoto.PhotoId, photoset = Model.PhotosetId}) } else { @Model.SiteUrl@Url.Action("Photo", new { controller = "Home", id = Model.CurrentPhoto.PhotoId }) }" />
    <meta property="og:image" content="@Model.CurrentPhoto.SquareThumbnailUrl" />
    <meta property="og:description" content="@if ( !Model.CurrentPhoto.OriginalFormat.IsEmpty() ) { @Html.Raw(Model.CurrentPhoto.OriginalFormat.Replace("\n","<br/>")) }" />

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script src="/galleria/galleria-1.2.7.min.js"></script>
    <style type="text/css">
    html, body { height: 100%; overflow: hidden; margin:0; padding:0;  }
    #container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-Index: 10000 }
    #galleria { position: relative;  width: 100%; height: 100%; background:#000 }
    </style>
}

<script type="text/javascript">
    var data = @Html.Raw(Model.PhotosJSON);

    Galleria.loadTheme('/galleria/themes/bongiozzo/galleria.bongiozzo.js');
    var elem = $('#galleria');
    var galleria;
    Galleria.run('#galleria', {
        show: @Model.IndexOfCurrentPhoto,
        transition: 'slide',
        initialTransition: 'fade',
        dataSource: data });

    Galleria.ready(function (options) {

        this.bind("image", function (e) {
            document.title = galleria.getData().title;

            $('#div-fblike').html('<fb:like href="' + data[galleria.getIndex()].url + '" layout="button_count" send="false" show_faces="false" colorscheme="dark" />');
            $('#div-twitter').html('<a href="https://twitter.com/share" class="twitter-share-button" data-url="' + data[galleria.getIndex()].url + '" data-text="' + galleria.getData().title + '">Tweet</a>');
            try {
                FB.XFBML.parse(document.getElementById('div-fblike'));
                twttr.widgets.load();
            } catch(ex) {}
        });
        
        galleria = this;
        this.attachKeyboard({
            right: this.next,
            left: this.prev
        });
        
        window.onresize = function () {
            galleria.resize();
        }

    });
</script>

<div id="container">
   <div id="galleria"></div>
</div>
